<template>
  <div class="container">
    <Breadcrumb :items="['公告管理', '公告列表']" />
    <div class="">
      <div class="header">
        <a-button type="primary" @click="handleClick">发布公告</a-button>
        <a-modal v-model:visible="showBulletin" title="发布公告" @ok="handleBulletinSubmit" :maskStyle="{'opacity':'0.15','background':'#FFFFF','animation':'none'}">
          <a-form :model="formBulletin" @finish-submit="handleBulletinSubmit">
            <a-form-item label="公告标题">
              <a-input v-model="formBulletin.title"/>
            </a-form-item>
            <a-form-item label="公告内容">
              <a-textarea
                style="height: 150px"
                placeholder="请输入公告内容"
                :max-length="3000"
                v-model="formBulletin.content"
                allow-clear
                show-word-limit/>
            </a-form-item>
            <a-form-item label="是否审核">
              <a-select v-model="formBulletin.bulletinStatus" placeholder="" allow-clear>
                <a-option value="0">待审核</a-option>
                <a-option value="1">审核通过</a-option>
                <a-option value="2">审核不通过</a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-modal>
        <a-range-picker
          style="width: 360px; margin-left: 20px"
          show-time
          v-model="times"
          format="YYYY-MM-DD HH:mm:ss"
          @ok="onTimeRangeSelect"
          @clear="onTimeClear"
        />
        <a-space direction="vertical" size="large">
          <a-input-search 
            :style="{width:'360px', marginLeft: '20px'}" 
            placeholder="Please enter something" 
            search-button 
            allow-clear
            v-model="searchValue"
            @search="handleSearch"
            @clear="searchClear"
          />
        </a-space>
      </div>
      <a-table :data="data" :pagination="false">
        <template #columns>
          <a-table-column title="ID" data-index="bulletinId"></a-table-column>
          <a-table-column title="公告标题" data-index="title"></a-table-column>
          <a-table-column title="公告内容" data-index="content"></a-table-column>
          <a-table-column title="所属类别" data-index="categoryName"></a-table-column>
          <a-table-column title="类别描述" data-index="categoryDesc"></a-table-column>
          <a-table-column title="发布时间" data-index="createTime"></a-table-column>
          <a-table-column title="发布人" data-index="nickName"></a-table-column>
          <a-table-column title="操作" data-index="operation">
            <template #cell="{ record }">
              <a-space>
                <a-button type="primary" @click="handleSetRecordFunc(record)">更新</a-button>
                <a-modal v-model:visible="showForm" title="更新公告" @ok="handleSubmit" :maskStyle="{'opacity':'0.15','background':'#FFFFF','animation':'none'}">
                  <a-form :model="formState" @finish-submit="handleSubmit">
                    <a-form-item label="ID">
                      <a-input v-model="formState.bulletinId" disabled/>
                    </a-form-item>
                    <a-form-item label="公告标题">
                      <a-input v-model="formState.title"/>
                    </a-form-item>
                    <a-form-item label="公告内容">
                      <a-textarea
                        style="height: 150px"
                        placeholder="请输入公告内容"
                        :max-length="3000"
                        v-model="formState.content"
                        allow-clear
                        show-word-limit
                      />
                    </a-form-item>
                    <a-form-item label="所属类别">
                      <a-input v-model="formState.categoryName"/>
                    </a-form-item>
                    <a-form-item label="类别描述">
                      <a-textarea
                        style="height: 50px"
                        placeholder="请输入类别描述"
                        :max-length="300"
                        v-model="formState.categoryDesc"
                        allow-clear
                        show-word-limit
                      />
                    </a-form-item>
                    <a-form-item label="发布人">
                      <a-input v-model="formState.nickName" disabled/>
                    </a-form-item>
                    <a-form-item label="是否置顶">
                      <a-select v-model="formState.top" field="top" placeholder="" allow-clear>
                        <a-option value="0">未置顶</a-option>
                        <a-option value="1">已置顶</a-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item label="是否审核">
                      <a-select v-model="formState.bulletinStatus" placeholder="" allow-clear>
                        <a-option value="0">待审核</a-option>
                        <a-option value="1">审核通过</a-option>
                        <a-option value="2">审核不通过</a-option>
                      </a-select>
                    </a-form-item>
                  </a-form>
                </a-modal>
                <a-button type="primary" @click="handleDelete(record)">删除</a-button>
                <a-modal 
                  v-model:visible="visible" 
                  @ok="handleOk" 
                  @cancel="handleCancel" 
                  :maskStyle="{'opacity':'0.15','background':'#FFFFF','animation':'none'}">
                  <div>是否删除这条信息?</div>
                </a-modal>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div style="width: 100%;margin: 10px auto;">
        <a-pagination 
        @change="pageChange" 
        :total="total" 
        :current="curPage" 
        :page-size="pageSize" />
      </div>
  </div>
</template>

<script lang="ts">
  import { onMounted, ref } from 'vue';
  import axios from 'axios';

  export default {
    setup() {
      const data = ref([]);
      const curPage = ref(1)
      const pageSize = ref(8)
      const total = ref(1)
      const searchData = ref({
        searchField:'title',
      })
      const dateField = ref({
        createTime:'create_time'
      })
      const times = ref()
      const searchValue = ref()

      const reqTableListData = () => {
        data.value  = []
        axios.get(`/bulletin/list`, {params: {
          curPage: curPage.value,
          pageSize: pageSize.value,
          searchField: searchData.value.searchField,
          search: searchValue.value,
          dateField: times.value ? dateField.value.createTime : '',
          startDate: times.value ? times.value[0] : '',
          endDate: times.value ? times.value[1] : '',
        }}).then((res1:any) => {
            console.log(res1);
            curPage.value = res1.current
            pageSize.value = res1.size
            total.value = res1.total
            res1.records.forEach((item: { top: any; }) => {
              item.top = item.top === 1 ? '已置顶' : '未置顶';
              console.log(res1);
              data.value.push(item);
            })
        })
      }
      onMounted(async()=>{
        await reqTableListData()
      });

      const showBulletin = ref<boolean>(false);
      const formBulletin = ref({
        title: '',
        content: '',
        nickName:'',
        bulletinStatus:'',
      })
      const handleClick = () => {
        showBulletin.value = true;
      }
      const handleBulletinSubmit = () => {
        axios.post(`/bulletin/saveBulletin`, formBulletin.value).then(res => {
          console.log(res.data)
          showBulletin.value = false
          reqTableListData()
        })
      }

      const showForm = ref<boolean>(false);
      const formState = ref({
        bulletinId: '',
        title: '',
        content: '',
        categoryName:'',
        categoryDesc:'',
        nickName:'',
        top:'',
        bulletinStatus:'',
      });
      const handleSetRecordFunc = (record:any) => {
        showForm.value = true;
        console.log("=====");
        console.log(record);
        formState.value.bulletinId = record.bulletinId
        formState.value.title = record.title
        formState.value.content = record.content
        formState.value.categoryName = record.categoryName
        formState.value.categoryDesc = record.categoryDesc
        formState.value.nickName = record.nickName
        // formState.value.top = record.top
        // formState.value.bulletinStatus = record.bulletinStatus
      };
      const handleSubmit = () => {
        axios.put(`/bulletin/update`, formState.value).then(res => {
          console.log(res.data)
          showForm.value = false
          reqTableListData()
        })
      };
      
      const visible = ref(false)
      const handleDelete = async (record: any) => {
          visible.value = true
          console.log(record.bulletinId)
          formState.value.bulletinId = record.bulletinId
      }
      const handleOk = () => {
        console.log(formState.value.bulletinId)
        axios.delete(`/bulletin/delete/${formState.value.bulletinId}`).then(res => {
            console.log(res.data)
            visible.value = false;
            reqTableListData()
        })
      }
      const handleCancel = () => {
        visible.value = false;
      }

      const pageChange = (current) => {
          curPage.value = current
          reqTableListData()
      }

      const handleSearch = () => {
          reqTableListData();
      }

      const onTimeRangeSelect = () => {
        console.log(times.value)
        reqTableListData()
      }

      const onTimeClear = () => {
        reqTableListData()
      }

      const searchClear = () => {
        reqTableListData()
      }

      return {
        data,
        curPage,
        pageSize,
        total,
        pageChange,
        reqTableListData,
        showForm,
        formState,
        handleSubmit,
        handleSetRecordFunc,
        visible,
        handleDelete,
        handleOk,
        handleCancel,
        showBulletin,
        formBulletin,
        handleClick,
        handleBulletinSubmit,
        searchData,
        dateField,
        times,
        searchValue,
        handleSearch,
        onTimeRangeSelect,
        onTimeClear,
        searchClear,
      };
    },
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .header {
    display: flex;
    padding: 20px;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
  }
</style>

<style lang="less" scoped>
  .mobile {
    .content {
      display: block;
      &-left {
        margin-right: 0;
        margin-bottom: 16px;
      }
      &-right {
        width: 100%;
      }
    }
  }
</style>
